#!/usr/bin/env python
# -*- coding:utf-8 -*-
# 项目名称:python学习_爬虫
# 文件名 :01 js简介.py
# @Time :2024/3/8 11:53
# @Author :wangyong
'''
简介:
111
'''
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>黑羽学院 | 登录</title>

  <style>
    .center-child { display: flex; justify-content: center; }
  </style>

  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

  <script>
    function postLoginRequest(){
      let username = document.querySelector('#username').value;
      let password = document.querySelector('#password').value;

      let einfo = ''
      if (username.length <6 ){
        einfo = `用户名 ${username} 错误，至少6位数字`;
      }
      else if (password.length <6 ){
        einfo = `密码 ${password} 错误，至少6位数字`;
      }
      document.getElementById('errInfo').innerHTML = einfo

      // 发送登录请求
      $.ajax({
        type: 'POST',
        url: '/api/mgr/signin',
        data:  {
          username: username,
          password: password,
        },
        // 成功
        success: function(data, status, xhr) {
          // jQuery 会自动将响应的消息体字符
          // 按json格式串反序列化为js对象
          if (data.ret === 0){
            location.href = '/hyms.html'
          }
          else{
            alert('登录失败： ' + data.msg)
          }

        },
        // 错误
        error:function (xhr, textStatus, errorThrown ){
          console.error(`${xhr.status} \n${textStatus} \n${errorThrown }`)
        }
      })
    }

    function inputCheck(){
      let password = document.querySelector('#password').value;
      let einfo = ''
      if (password.length <6 ){
        einfo = `密码 ${password} 错误，至少6位数字`;
      }
      document.getElementById('errInfo').innerHTML = einfo
    }
  </script>
</head>

<body >

  <!-- 输入区  -->
  <div class="center-child">
    <div style="margin-top: 5em;">
      <p >输入用户名、密码登录</p>

      <input type="text" class="form-control" id="username"
        placeholder="用户名">

      <br><br>

      <input type="password" class="form-control" id="password"
        placeholder="密码" oninput="inputCheck()" >

      <br><br>

      <div class="center-child">
        <button style="margin:0 auto"
          onclick="postLoginRequest()">登录</button>
      </div>

    </div>
  </div>

  <!-- 提示信息 -->
  <div class="center-child">
    <p style="color:red" id='errInfo'></p>
  </div>

</body>

</html>